<!DOCTYPE HTML>
<html lang="en">
<head>
  <!-- when using the mode "code", it's important to specify charset utf-8 -->
  <meta charset="utf-8">

  <title>JSON格式化工具-哈哈</title>

  <link href="dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
  <script src="dist/jsoneditor.min.js"></script>

  <style type="text/css">
    body {
      font: 10.5pt arial;
      color: #4d4d4d;
      line-height: 150%;
      width: 800px;
    }

    code {
      background-color: #f5f5f5;
    }

    #jsoneditor {
      width: 1200px;
      height: 800px;
    }
  </style>
</head>
<body>


<div id="jsoneditor"></div>

<script>
  const container = document.getElementById('jsoneditor')

  const options = {
    mode: 'code',
    modes: ['text', 'code', 'form', 'tree', 'view', 'preview'], // allowed modes
    onError: function (err) {
      alert(err.toString())
    },
    onModeChange: function (newMode, oldMode) {
      console.log('Mode switched from', oldMode, 'to', newMode)
    }
  }

  const json = {
    "array": [1, 2, 3],
    "boolean": true,
    "null": null,
    "number": 123,
    "object": {"a": "b", "c": "d"},
    "string": "Hello World"
  }

  const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
